<template>
  <div class="main">
      <div class="content">
        <el-row :gutter="10" class="checktitle">
          <el-col :span="16"><div class="grid-content bg-purple">
              <div class="checkBox">
                    <div class="checkDetail">
                   <span>起投资金：</span>
                    <el-radio-group v-model="radio1" size="small" fill="#cd9c54">
                      <el-radio-button label="不限"></el-radio-button>
                      <el-radio-button label="100万"></el-radio-button>
                      <el-radio-button label="100万-300万"></el-radio-button>
                      <el-radio-button label="300万以上"></el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="checkDetail">
                    <span>预期收益：</span>
                    <el-radio-group v-model="radio2" size="small" fill="#cd9c54">
                      <el-radio-button label="不限"></el-radio-button>
                      <el-radio-button label="≤9%"></el-radio-button>
                      <el-radio-button label="9%-10%"></el-radio-button>
                      <el-radio-button label="10%-12%"></el-radio-button>
                      <el-radio-button label="12%以上"></el-radio-button>                      
                    </el-radio-group>
                  </div>
                   <div class="checkDetail">
                    <span>产品期限：</span>
                    <el-radio-group v-model="radio3" size="small" fill="#cd9c54">
                      <el-radio-button label="不限"></el-radio-button>
                      <el-radio-button label="≤12个月"></el-radio-button>
                      <el-radio-button label="12-24个月（含）"></el-radio-button>
                      <el-radio-button label="24个月以上"></el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="checkDetail">
                    <span>投资领域：</span>
                    <el-radio-group v-model="radio4" size="small" fill="#cd9c54">
                      <el-radio-button label="不限"></el-radio-button>
                      <el-radio-button label="房地产"></el-radio-button>
                      <el-radio-button label="金融投资"></el-radio-button>
                      <el-radio-button label="工商企业流贷"></el-radio-button>
                      <el-radio-button label="政信"></el-radio-button>
                      <el-radio-button label="其他"></el-radio-button>                      
                    </el-radio-group>
                  </div>
                  <div class="checkDetail">
                    <span>付息方式：</span>
                    <el-radio-group v-model="radio5" size="small" fill="#cd9c54">
                      <el-radio-button label="不限"></el-radio-button>
                      <el-radio-button label="按季付息"></el-radio-button>
                      <el-radio-button label="半年付息"></el-radio-button>
                      <el-radio-button label="按年付息"></el-radio-button>
                      <el-radio-button label="到期付息"></el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="checkDetail">
                    <span>产品状态：</span>
                    <el-radio-group v-model="radio6" size="small" fill="#cd9c54">
                      <el-radio-button label="不限"></el-radio-button>
                      <el-radio-button label="预售"></el-radio-button>
                      <el-radio-button label="在售"></el-radio-button>
                      <el-radio-button label="售罄"></el-radio-button>
                    </el-radio-group>
                  </div>

                  <div class="checkDetail checkDetailflex">
                    <span>已选条件:</span>
                    <div class="checkedbox">
                     <el-tag
                        type="info"
                        :key="tag"
                        v-for="tag in dynamicTags"
                        color="#fff"
                        :disable-transitions="true"
                        @close="handleClose(tag)">
                        {{tag}}
                      </el-tag>
                    </div>
                    <span class="chongzhi" @click="repetchange">重置条件</span>
                  </div>
                  <p class="allnumber">符合条件的共有{{productBox.length}}条</p>
              </div>  
            </div></el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <contactus></contactus>
              <nuxt-link to="/product/18">
                    <div class="tuiguang">
                      <img src="http://p6dwecco6.bkt.clouddn.com/list/qiyuejijin.png" alt="">
                      <p>推广</p>
                    </div>
              </nuxt-link>
            
            </div>
          </el-col>
        </el-row>
      </div>
         <div class="productbox">
                  <div class="prodectdetail" v-for="(item,index) in productBox" :key="index">
                    <el-row>
                       <el-col :span="18">
                         <h1><span>{{item.name}}</span></h1>
                              <!-- <h3>发行机构:<span>{{item.publishEduinfo}}</span></h3> -->
                         <h3>天沁推介:<span>{{item.coreHighlights}}</span></h3>        
                            <el-row style="border-right:1px solid #ccc;">   
                                 <el-col :span="9">
                                     <div class="productinfo" style="padding-left: 100px;">
                                          <h2 style="text-align: left;">投资方向:{{item.investDirect}}</h2>
                                          <p style="text-align: left;margin:20px 0;">付息方式：{{item.payRateWay}}</p>
                                     </div>
                                 </el-col>
                                  <el-col :span="5">
                                      <div class="productinfo">
                                          <h2>{{item.productExpires == 0 ? "永续":item.productExpires + "个月"}}</h2>
                                          <p>投资期限</p>
                                     </div>
                                 </el-col>
                                  <el-col :span="5">
                                      <div class="productinfo">
                                          <h2>{{item.beginMoney}}万</h2>
                                          <p>起投资金</p>
                                     </div>
                                 </el-col>
                                 <el-col :span="5">
                                    <div class="productinfo" style="border:none;">
                                          <h2 style="color:#b41d24;font-weight: bolder; font-size: 22px; margin-top: 6px;">{{item.yearEarningsRate}}%</h2>
                                          <p>预期收益</p>
                                     </div>
                                 </el-col>
                            </el-row>
                      </el-col>

                      <el-col :span="6">
                          <div class="productbutton">
                            <nuxt-link :to="'/product/'+ item.pid"><el-button class="detailbutton">查看详情</el-button></nuxt-link>
                            <el-button class="detailbutton">立即预约</el-button>                       
                          </div>
                        </el-col>
                    </el-row>
                </div>
        </div>
        <fund1></fund1>
        <trust2 :newdata="newlist"></trust2>
        <fund2 :newdata="newlist2"></fund2>
  </div>
</template>


<script>  
import asyncApi from '../../static/js/asyncApi.js'
import api from '../../static/js/api.js'
import contactus from "../../components/contactus";
import fund1 from "../../components/fund1";
import fund2 from "../../components/fund2";
import trust2 from "../../components/trust2";
import announcement from "../../components/announcement";
export default {
  data() {
    return {
      dynamicTags:[],
      radio1: "不限",
      radio2: "不限",
      radio3: "不限",
      radio4: "不限",
      radio5: "不限",
      radio6: "不限",
      postdata1:"",
      postdata2:"",
      postdata3:"",
      postdata4:"",
      postdata5:"",
      postdata6:"",
      newsinfo:{
        title:"投资策略",
        msg1:"观宏观大势，把握市场发展趋势",
        msg2:"观财经实时热点，紧握当下投资机会，",
        msg21:"紧握当下投资机会",        
        msg3:"观市场变幻，把握最佳投资时机"        
      }     
    };
  },
  components:{
    contactus,
    fund1,
    fund2,
    trust2,
    announcement
  },
   methods:{
    gonewdetail(val){
        this.$router.push("/post/" + val)
    },
    change(val1,val2,val3,val4,val5,val6){
        if(val1 == "不限"){
          this.postdata1 = ""
        }else if(val1 == "100万"){
          this.postdata1 = "1"
        }else if(val1 == "100万-300万"){
          this.postdata1 = "2"
        }else if(val1 == "300万以上"){
          this.postdata1 = "3"
        }

        if(val2 == "不限"){
          this.postdata2 = ""
        }else if(val2 == "≤9%"){
          this.postdata2 = "1"
        }else if(val2 == "9%-10%"){
          this.postdata2 = "2"
        }else if(val2 == "10%-12%"){
          this.postdata2 = "3"
        }else if(val2 == ">12%"){
          this.postdata2 = "4"
        }

        if(val3 == "不限"){
          this.postdata3 = ""
        }else if(val3 == "≤12个月"){
          this.postdata3 = "4"
        }else if(val3 == "12-24个月（含）"){
          this.postdata3 = "5"
        }else if(val3 == "24个月以上"){
          this.postdata3 = "6"
        }

        if(val4 == "不限"){
          this.postdata4 = ""
        }else{
          this.postdata4 = val4
        }

        if(val5 == "不限"){
          this.postdata5 = ""
        }else{
          this.postdata5 = val5
        }

      if(val6 == "不限"){
        this.postdata6 = ""
      }else{
        this.postdata6 = val6
      }

      this.getprobuct()
    },
    change1(val){
        if(val == "不限"){
          this.postdata1 = ""
        }else if(val == "100万"){
          this.postdata1 = "1"
        }else if(val == "100万-300万"){
          this.postdata1 = "2"
        }else if(val == "300万以上"){
          this.postdata1 = "3"
        }
        this.getprobuct()
      },
    change2(val){
        if(val == "不限"){
          this.postdata2 = ""
        }else if(val == "≤9%"){
          this.postdata2 = "1"
        }else if(val == "9%-10%"){
          this.postdata2 = "2"
        }else if(val == "10%-12%"){
          this.postdata2 = "3"
        }else if(val == ">12%"){
          this.postdata2 = "4"
        }
        this.getprobuct()
        
    },
    change3(val){
      if(val == "不限"){
        this.postdata3 = ""
      }else if(val == "≤12个月"){
        this.postdata3 = "4"
      }else if(val == "12-24个月（含）"){
        this.postdata3 = "5"
      }else if(val == "24个月以上"){
        this.postdata3 = "6"
      }
        this.getprobuct()
      
    },
    change4(val){
      if(val == "不限"){
        this.postdata4 = ""
      }else{
        this.postdata4 = val
      }
        this.getprobuct()
      
    },
    change5(val){
      if(val == "不限"){
        this.postdata5 = ""
      }else{
        this.postdata5 = val
      }
        this.getprobuct()
      
    },
    change6(val){
      if(val == "不限"){
        this.postdata6 = ""
      }else{
        this.postdata6 = val
      }
        this.getprobuct()
      
    },
    getprobuct(){
      api.getProduct(
        {categoryName:"信托资管",
        beginMoney:this.postdata1,
        yearEarningsRate:this.postdata2,
        productDeadline:this.postdata3,
        investDirect:this.postdata4,
        payRateWay:this.postdata5,
        productStatus:this.postdata6       
        }).then((res)=>{
        this.productBox = res.data.list
      })
    },
    repetchange(){
      this.radio1 = "不限";
      this.radio2 = "不限";
      this.radio3 = "不限";
      this.radio4 = "不限";
      this.radio5 = "不限";
      this.radio6 = "不限";
    }
  },
  async asyncData () {
    let [data1,data2,data3] = await Promise.all([
        asyncApi.asyncgetProduct({categoryName:"契约基金"}),
        asyncApi.asyncGetCategoryPost({categoryName: "投资策略",page: "2",pageSize: "6"}),
        asyncApi.asyncGetCategoryPost({categoryName: "契约基金",page: "1",pageSize: "6"})
    ])
    return {
      productBox:data1.data.data.list,
      newlist:data2.data.data.list,
      newlist2:data3.data.data.list,
      
      }
 },
   computed:{
    allPanelShow() {
      this.radio1;
      this.radio2;
      this.radio3;
      this.radio4;
      this.radio5;
      this.radio6;
      return Date.now()
  　}
  },
  watch:{
     allPanelShow() {
       if (this.radio1 || this.radio2 || this.radio3 || this.radio4 || this.radio5 || this.radio6) {
                this.dynamicTags = []
              if (this.radio1 != "不限") {
                 this.dynamicTags.push(this.radio1)
              }
              if(this.radio2 != "不限"){
                this.dynamicTags.push(this.radio2)
              }
              if(this.radio3 != "不限"){
                this.dynamicTags.push(this.radio3)
              }
              if(this.radio4 != "不限"){
                this.dynamicTags.push(this.radio4)
              }
              if(this.radio5 != "不限"){
                this.dynamicTags.push(this.radio5)
              }
              if(this.radio6 != "不限"){
                this.dynamicTags.push(this.radio6)
              }
            this.change(this.radio1,this.radio2,this.radio3,this.radio4,this.radio5,this.radio6)
       }
     }
  },
  head () {
    return {
      title: "契约基金_基金产品_最新契约基金产品_2018契约基金产品_契约基金_债权投资_基金投资_契约基金投资_理财产品-天沁财富",
      meta: [
         { hid:"keywords",name: 'keywords', content: '基金产品，债权基金，契约基金,债权投资,债权基金,债权产品,2018契约基金产品,新契约基金产品,契约基金投资' },
         { hid:"description",name: 'description', content: '天沁财富契约基金产品中心为契约基金投资者提供最新的基金,契约基金投资,契约基金产品，帮助契约基金产品投资者挑选最适合投资者财富保值增值需求的基金产品。' }
      ]
    }
  }
};
</script>

<style scoped>
.tuiguang{
  margin: 10px 0;
  position: relative;
}
.tuiguang img{
  width: 100%;
  height: 178px;
}
.tuiguang p{
  text-align: right;
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: white;
  font-size: 14px;
}
.productmsg{
      border-right: 1px solid #dddddd;
      height: 120px;
}
.productmsg p{  
  font-size: 16px;
  color: #333;
  padding-left: 20px;
  margin-top: 25px;
}
.productbox{
  background: white;
}
.checktitle{
  padding-bottom: 20px;
}
.checkDetailflex{
  display: flex;
}
.checkedbox{
  display: inline-block;
  width: 450px;
}
.allnumber{
  font-size: 14px;
  text-align: right;
  color: #333;
  margin-top: 20px;
}
.checkDetail .chongzhi{
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: white;
  background: #b41d24;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  
}
.newBoxDetali {
  height: 140px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.newimg {
  width: 40%;
  height: 100px;
  float: left;
  margin-top: 10px;
}
.newinfo {
  width: 60%;
  float: left;
  padding: 0 10px;
  margin-top: 10px;
}
.newinfo a {
  display: inline-block;
  width: 210px;
  overflow: hidden;
  text-overflow: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.5;
  color: #333;
}
.newcontent {
  text-indent: 2rem;
  overflow: hidden;
  text-overflow: none;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  color: #555557;
}
.newimg img {
  width: 100%;
  height: 100%;
}
.detailbutton {
  background: #cd9c54;
  color: white;
  display: block;
  margin: 20px auto;
}
.newsBox {
  margin-top: 20px;
}
.newsBox h1 {
  color: black !important;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.newsBox h1 a {
  font-size: 12px;
}
.productinfo {
  overflow: hidden;
  height: 70px;
  margin-top: 24px;
  border-right: 1px solid #dddddd;
}
.productinfo h2 {
  color: #333 ;
  font-size: 18px;
  margin-top: 10px;
  text-align: center;
}
.productinfo p {
  margin: 20px;
  font-size: 14px;
  color: #666;
  text-align: center;
}
.prodectdetail {
  width: 100%;
  padding: 20px;
  border-bottom: 1px solid #dddddd;
      overflow: hidden;
    box-sizing: border-box;
}
.main .prodectdetail h1{
  font-size: 20px;
  color: #333;
  padding-left: 100px;
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  padding-right: 60px;
  box-sizing: border-box;

}
.main .prodectdetail h1 img{
  vertical-align: middle;
  width: 96px;
  height: 24px;
}
.main .prodectdetail h3{  
  font-size: 16px;
  color: #333;
  padding-left: 100px;
  margin-top: 14px;
}
.prodectdetail:hover {
  box-shadow:   0 0 3px #ccc;
}

.main {
  background: #f5f5f5;
  width: 1200px;
  margin: 10px auto;
}
.main h1 {
  font-size: 20px;
  line-height: 30px;
  color: #b41d24;
  font-weight: normal;
}
.checkBox {
   background: white;
  height: 502px;
  padding: 24px;
  overflow: hidden;
  box-sizing: border-box;
}
.checkDetail {
  margin-top: 20px;
}
.checkDetail span {
  padding-right: 5px;
  color: black;
  font-size: 16px;
  line-height: 26px;
  margin-right: 20px;
}
</style>
